<template>
  <el-row class="sidebar">
    <el-col :span="12">
      <el-menu
        class="sidebar-el-menu"
           :default-active="onRoutes"
           :collapse="collapse"
           background-color="#334256"
           text-color="#ffffff"
           active-text-color="#20a0ff"
           router
      >
        <el-submenu index="1">
          <template slot="title">
            <i class="el-icon-s-order"></i>
            <span>数据统计</span>
          </template>
          <el-menu-item-group>
            <el-menu-item index="sale-dis">数据统计(地域)</el-menu-item>
            <el-menu-item index="sale-pro">省销售统计(地域)</el-menu-item>
            <el-menu-item index="sale-city">市销售统计(地域)</el-menu-item>
            <el-menu-item index="sale-area">区销售统计(地域)</el-menu-item>
            <el-menu-item index="sale-pro-act">省活跃度统计(地域)</el-menu-item>
            <el-menu-item index="sale-city-act">市活跃度统计(地域)</el-menu-item>
            <el-menu-item index="sale-area-act">区活跃度统计(地域)</el-menu-item>
          </el-menu-item-group>
        </el-submenu>
        <el-submenu index="2">
          <template slot="title">
            <i class="el-icon-bank-card"></i>
            <span>卡号管理</span>
          </template>
          <el-menu-item-group>
            <el-menu-item index="Card">卡号批次设置</el-menu-item>
          </el-menu-item-group>
        </el-submenu>
        <el-submenu index="3">
          <template slot="title">
            <i class="el-icon-s-custom"></i>
            <span>大客户专员专区</span>
          </template>
          <el-menu-item-group>
            <el-menu-item index="CustomerList">大客户专员列表</el-menu-item>
            <el-menu-item index="CustomerSet">设置</el-menu-item>
            <el-menu-item index="CustomerOrderList">订单列表</el-menu-item>
          </el-menu-item-group>
        </el-submenu>
        <el-submenu index="4">
          <template slot="title">
            <i class="el-icon-notebook-2"></i>
            <span>财务管理</span>
          </template>
          <el-menu-item-group>
            <el-menu-item index="walletList">钱包列表</el-menu-item>
            <el-menu-item index="orderList">订单列表</el-menu-item>
            <el-menu-item index="reviewOrderList">审核订单列表</el-menu-item>
            <el-menu-item index="manifestList">提现列表</el-menu-item>
          </el-menu-item-group>
        </el-submenu>
        <el-submenu index="5">
          <template slot="title">
            <i class="el-icon-s-tools"></i>
            <span>系统管理</span>
          </template>
          <el-menu-item-group>
            <el-menu-item index="user">人员管理</el-menu-item>
            <el-menu-item index="role">角色管理</el-menu-item>
            <el-menu-item index="permission">权限管理</el-menu-item>
            <el-menu-item index="menu">菜单管理</el-menu-item>
          </el-menu-item-group>
        </el-submenu>
      </el-menu>
    </el-col>
  </el-row>
</template>

<script>
import bus from "../assets/js/bus"
export default {
  data() {
    return {
      collapse: false, //是否折叠
    };
  },
  created() {
    //通过bus进行组件间的通信，来折叠侧边栏
    bus.$on("collapse", (msg) => {
      this.collapse = msg;
    });
  },
  methods: {
    handleOpen(key, keyPath) {
      console.log(key, keyPath);
    },
    handleClose(key, keyPath) {
      console.log(key, keyPath);
    },
  },
  computed:{
        onRoutes(){
            return this.$route.path.replace('/','');
        }
    }
};
</script>


<style scoped>
.sidebar {
  display: block;
  position: absolute;
  left: 0;
  top: 70px;
  width: 200px;
  bottom: 0;
  background-color: #334256;
  overflow: scroll;
}
.sidebar-el-menu:not(.el-menu--collapse) {
  width: 200px;
  clear: both;
}

.sidebar::-webkit-scrollbar {
  width: 0;
}

.sidebar > ul {
  height: 100%;
}
</style>